<template>
  <!-- form 查询表单 -->
    <el-form :model="shop" ref="formRef" label-width="auto" label-position="right" style="padding-bottom: 10px;">
        <el-row :gutter="20">
            <el-col :span="8">
                <el-form-item label="商家名" prop="name">
                    <el-input v-model="shop.shopname" placeholder="请输入商家名" clearable/>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="商家电话" prop="author">
                    <el-input v-model="shop.phone" placeholder="请输入商家电话" clearable/>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="商家状态" prop="state">
                    <el-select v-model="shop.state" placeholder="商家状态" clearable>
                        <el-option label="全部" value="" />
                        <el-option label="营业" value="1" />
                        <el-option label="停休" value="0" />
                    </el-select>
                </el-form-item>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="24">
                <el-button type="primary" @click="doList">查询</el-button>
                <el-button type="default" @click="resetForm(formRef)">重置</el-button>
            </el-col>
        </el-row>
    </el-form>

    <!-- table 表格 -->
    <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column type="index" lable="序号" width="80"/>
        <el-table-column prop="id" label="ID"/>
        <el-table-column prop="shopname" label="商家名称" />
        <el-table-column prop="phone" label="电话" />
        <el-table-column prop="address" label="地址" />
        <el-table-column prop="state" label="状态" />
        <el-table-column label="操作" width="300">
            <template #default="scope">
                <el-button type="primary" @click="xiaDan(scope.row)">进店</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 进店下单 dialog-->
    <el-dialog v-model="PlaceOrder" title="商家美食" width="80%" top="2vh" destroy-on-close>
        <shop-xia-dan ref="jindian"
                     @closeDialog="PlaceOrder = false">
        </shop-xia-dan>
    </el-dialog>
</template>

<script setup lang="ts">
import {ref, nextTick, onMounted} from "vue";
import {FormInstance} from "element-plus";
import axios from "axios";
// import UpdatePage from "../book/UpdatePage.vue";
import ShopXiaDan from "./ShopXiaDan.vue";
//---------------------- 主页面显示 ------------------------------



const shop=ref({
    id: '',
    shopname: '',//店铺名称
    pwd: '',
    checked: '', //审核状态
    score: '',//评分
    phone: '',// 手机
    address: '',// 地址
    state: '',//状态
    picture: '',// 图片
    income: '',//收入
});
const tableData=ref([]);
//---------------------- 查询 ------------------------------
const doList=async ()=>{
    const {data} = await axios.get('/api/shop',{params:shop.value});
    tableData.value = data;
};

//--------------------------- 进店 对话框 ---------------------------
const PlaceOrder = ref(false);
const jindian = ref(); // 组件引用
const xiaDan = (obj)=>{
    PlaceOrder.value = true;
    nextTick(()=>{
        jindian.value.handleUpdateData(obj);
    })
}
//---------------------- 重置 ------------------------------
const formRef = ref<FormInstance>();
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
// 刷新页面
const doFlushPage = ()=>{
    doList();
}
// 初始化
onMounted(()=>{
    doList();   // 查询数据
})
</script>

<style scoped>

</style>